import { Button, Form, Input, Spin,Radio } from 'antd';
import React,{useState} from 'react';
import { bannerAdd } from '../../api/cake';
import ImgUpload from '../../components/ImgUpload';
const layout = {
  labelCol: {
    span: 4,
  },
  wrapperCol: {
    span: 19,
  },
};
const tailLayout = {
  wrapperCol: {
    offset: 8,
    span: 16,
  },
};

const BannerPublic = () => {
  const [form] = Form.useForm();
  let [loading,setLoading] = useState(false)

  const onFinish = (values) => {
    console.log(values);
    setLoading(true) //开启loading
    bannerAdd(values).then(res=>{
      setLoading(false) //关闭loading
    })
  };

  const onReset = () => {
    form.resetFields();
  };

  return (
    <Spin spinning={loading}>
      <Form {...layout} form={form} name="control-hooks" onFinish={onFinish}>
        <Form.Item
          name="name"
          label="活动名称"
          rules={[
            {
              required: true,
            },
          ]}
        >
          <Input />
        </Form.Item>
        <Form.Item
          name="link"
          label="活动链接"
          rules={[
            {
              required: true,
            },
          ]}
        >
          <Input />
        </Form.Item>
        <Form.Item
          name="poster"
          label="活动封面"
          rules={[
            {
              required: true,
            },
          ]}
        >
          <ImgUpload />
        </Form.Item>
        <Form.Item
          name="type"
          label="是否超链接"
          rules={[
            {
              required: true,
            },
          ]}
        >
          <Radio.Group value="1">
            <Radio value="1">跳转超链接</Radio>
            <Radio value="2">跳转项目页面</Radio>
          </Radio.Group>
        </Form.Item>

        
        <Form.Item {...tailLayout}>
          <Button type="primary" htmlType="submit">
            提交
          </Button>
          <Button htmlType="button" onClick={onReset}>
            重置
          </Button>
        </Form.Item>
      </Form>
    </Spin>
  );
};

export default BannerPublic;
